:root{
	font-size:14px;
	font-family: 'YouYuan';
}
#head{
	height: 4.5rem;
	background:linear-gradient(90deg,#333,#111,#aaa);
}
#head .bg{
	background:url('../images/bg.png') repeat center ;
}
#head .bg button:hover svg{
	animation:change 2s ease-in-out infinite;
}
#head .navbar-brand span{
	font-size:1.6rem;
	text-shadow:4px 2px 6px #ccc;
	animation:jumping 0.7s infinite alternate; 
}
#head .navbar-brand span:nth-of-type(1){
	animation-delay:0s;
}
#head .navbar-brand span:nth-of-type(2){
	animation-delay:0.25s;
}
#head .navbar-brand span:nth-of-type(3){
	animation-delay:0.5s;
}
#head .navbar-brand span:nth-of-type(4){
	animation-delay:0.75s;
}
@keyframes jumping{
	0%{
		transform: translateY(0);
		text-shadow:4px 2px 6px #ccc; 
	}
	100%{
		transform: translateY(-16px);
		text-shadow:4px 6px 6px #ccc; 
	}
}
@keyframes change{
	0%{
		transform: rotate(0);
	}
	25%{
		transform: rotate(45deg);
	}
	50%{
		transform: rotate(0deg);
	}
	75%{
		transform: rotate(-45deg);
	}
	100%{
		transform: rotate(0deg);
	}
}
#myNav{
	background:linear-gradient(#333,#222,#111);
	left: 0;
	top: 4.5rem;
	z-index: 1024;
}
#myNav a{
	color: #ccc;
}
#myNav a:hover{
	color: #fff;
}

.main{
	background:linear-gradient(90deg,#333,#111,#aaa);
}
.main nav a{
	width: 100%;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}
.main nav a.active,#myNav a.active{
	background: rgba(255, 255, 255, .3);
}
.main nav a:hover,#myNav a:hover{
	text-shadow: 0 3px 10px rgb(255,255,255);
	transition: .5s;
}
.leftCon{
	height: calc(100vh - 4.5rem);
	background: url(../images/bg.png) center;
}
.rightCon{
	background: #e5e5e5;
}

.exit>a{
	color:black;
	font-family: "宋体";
	
}
.exit>a:hover{
	font-weight: bold;
	text-decoration:none;
	color:red;
	opacity: .8;
}
#table-body td{
	vertical-align: middle;
}

.mychars>div>div{
	width: 30vw;
	height: 30vw; 
	border: 1px solid #000;
	background-color: aqua;
}
